<template>
    <div class="child-content">
            <div class="form-show">
                <el-form ref="form" :inline="true" :model="formData" size="default">
                    <div class="self-form">
                        <el-form-item label="日期" prop="dateRange">
                            <el-date-picker v-model="dateRange" type="daterange" clearable range-separator="至" value-format="YYYY-MM-DD"
                                style="width: 448px" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                        <el-form-item label="抵扣类型" prop="deductType" style="margin-right: 0">
                            <el-select v-model="formData.deductType" clearable style="width: 224px">
                                <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item, index) in deductTypeList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="self-form-end">
                        <el-form-item style="margin: 0">
                            <el-button type="primary" @click="queryData">查询</el-button>
                        </el-form-item>
                    </div>

                </el-form>
            </div>

            <el-alert class="alert-box" title="温馨提示：超过业务设置的确认时间未确认，系统将自动确认，请您及时确认抵扣消费记录。" type="warning" show-icon />

            <div class="data-table">
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column prop="id" label="序号" align="center" width="60">
                        <template #default="scope">
                            <div>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deductType" label="抵扣类型" align="center" width="80"/>
                    <el-table-column prop="bizDesc" label="业务类型" align="center" width="80"/>
                    <el-table-column prop="amount" label="分值/次数" align="center" width="100">
                        <template #default="scope">
                            <div class="item-score" v-if="scope.row.deductType == '抵扣积分'">
                                <div class="item-score-icon"> <img src="@/assets/images/score-icon.png" alt="">
                                </div>
                                <div class="item-score-num">{{scope.row.amount}}</div>
                            </div>
                            <div class="item-times" v-else>
                                <div class="item-times-icon"> <img src="@/assets/images/times-icon.png" alt=""> </div>
                                <div class="item-times-num">{{scope.row.amount}}</div>
                            </div>
                        </template>
                    </el-table-column>
					<el-table-column prop="expireHour" label="确认时间" align="center" width="80"><template #default="scope">{{scope.row.expireHour}}小时</template></el-table-column>					
                    <el-table-column prop="createTime" label="创建日期" align="center" width="160" />
                    <el-table-column prop="remark" label="备注" />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <el-button type="danger" size="small" v-if="scope.row.dataStatus == '0'" @click="toComfirm(scope.row)">确定</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="pagination-box">
                    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :small="false"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
</template>

<script setup>
import { ElMessageBox, ElMessage  } from 'element-plus'
import { getVipDiscountList, confirmVipDiscount } from '@/api/vip'
import { getMemberType } from '@/api/common'

const dateRange = ref([])
const formData = reactive({
    startDate: '',
    endDate: '',
    deductType: ''
})
const deductTypeList = ref([])
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const tableData = ref([])

watch(() => dateRange.value, (newVal, oldVal) => {
    if(newVal) {
        formData.startDate = newVal[0]
        formData.endDate = newVal[1]
    }else {
        formData.startDate = ''
        formData.endDate = ''
    }
})

const queryData = () => {
    pageNum.value = 1
    getTableData()
}

const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    pageNum.value = val
    getTableData()
}

const getTableData = async () => {
    const res = await getVipDiscountList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formData
    })
    if(res) {
        let { data } = res
        tableData.value = data
        total.value = res.total
    }
}

const getDeductType = async () => {
    const res = await getMemberType('sys_deduct_type')
    if(res) {
        let { data } = res
        deductTypeList.value = data
    }
}

const toComfirm = (row) => {
    ElMessageBox.confirm('确认该抵扣吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        confirmVipDiscount(row.detailUid).then(() => {
            ElMessage.success('确认成功')
            getTableData()
        })
    }).catch(() => {
        console.log('取消')
    })
}

onMounted(() => {
    getDeductType()
    getTableData()
})
</script>

<style lang="scss" scoped>
.form-show {
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 16px;
    margin-bottom: 16px;

    .self-form {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .self-form-end {
        justify-content: flex-end;
    }
}

.alert-box {
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(252, 183, 53, 0.2);
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-weight: 700;

    ::v-deep {
        .el-alert__icon {
            color: rgba(252, 183, 53, 1);
        }
    }
}

.data-table {
    width: 100%;
    height: auto;
    position: relative;

    .item-score {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(102, 102, 102, 1);
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;

        .item-score-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        .item-score-num {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            font-weight: 500;
            line-height: 30px;
        }

    }

    .item-times {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(102, 102, 102, 1);
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;

        .item-times-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        .item-times-num {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            font-weight: 500;
            line-height: 30px;
        }

    }



    .item-status-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .opt-btn {
        display: flex;
        align-items: center;

        .item-opt-img {
            width: 16px;
            height: 16px;

            &:not(:last-child) {
                margin-right: 24px;
            }
        }
    }

    .pagination-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 24px;
    }
}

::v-deep {
    .el-input__wrapper {
        box-shadow: none;
    }

    .el-table th.el-table__cell {
        background: rgba(244, 247, 255, 1);
        border-bottom-color: transparent;
        color: rgba(5, 11, 32, 1);
    }

    .el-select__placeholder {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-range-input {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-form-item__label {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }
}
</style>